<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>08.group-animation</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css"
            rel="stylesheet"
        />

        <style>
            /* 我们不但可以直接使用animation，还可以将transition和animation一起结合使用 */
            .slide-enter {
                opacity: 0;
                /*transform:translateY(20px);*/
            }

            /* 也可以利用animation直接实现多帧动画操作 */
            .slide-enter-active {
                animation: slide-in 1s forwards;
                transition: opacity 0.5s;
            }

            .slide-leave {
            }

            .slide-leave-active {
                animation: slide-out 1s ease-out forwards;
                transition: opacity 3s;
                opacity: 0;
            }

            @keyframes slide-in {
                from {
                    transform: translateY(20px);
                }

                to {
                    transform: translateY(0);
                }
            }

            @keyframes slide-out {
                from {
                    transform: translateY(0);
                }

                to {
                    transform: translateY(20px);
                }
            }
        </style>
    </head>

    <body>
        <div id="app">
            <button class="btn btn-pirmary" @click="addItem">Add Item</button>
            <!-- TODO:实现分组动画 -->
            <ul class="list-group">
                <transition-group name="slide">
                <li
                    class="list-group-item"
                    v-for="(number,index) in numbers"
                    @click="removeItem(index)"
                    style="cursor: pointer"
                    :key="number"
                >
                    {{number}}
                </li>
            </transition-group>
            </ul>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    show: true,
                    numbers: [1, 2, 3, 4, 5],
                },
                methods: {
                    addItem() {
                        const pos = Math.floor(
                            Math.random() * this.numbers.length
                        );
                        this.numbers.splice(pos, 0, this.numbers.length + 1);
                    },
                    removeItem(index) {
                        this.numbers.splice(index, 1);
                    },
                },
            });
        </script>
    </body>
</html>
